<template>
  <view class="cameraBox">
    <text class="text1"> 为保证是本人操作 </text>
    <text class="text2"> 需采集你的人脸信息以核实身份 </text>
    <camera :device-position="position ? 'front' : 'back'">
      <cover-image
        src="../../static/imgs/shibie.png"
        class="shibie"
        @click="changePos"
      ></cover-image>
      <cover-image
        src="../../static/imgs/exchange.png"
        class="exchange"
        @click="exchangeSome"
      ></cover-image>
    </camera>

    <text class="text3"> 请确保正脸出现在取景框中，以便识别 </text>
    <text class="text4"> 一旦提交后则不能更改，请务必认真确认 </text>
    <view class="cameraBox_btn" @click="getPhoto"> 点击开始拍摄 </view>
  </view>
</template>
<script>
export default {
  name: "index",
  data() {
    return {
      image: "",
      position: true,
    };
  },
  onLoad() {},
  methods: {
    exchangeSome() {
      console.log("切换");
      this.position = !this.position;
    },
    changePos() {},
    getPhoto() {
      uni.showLoading();
      // 创建相机上下文对象,获取唯一的相机对象
      const context = uni.createCameraContext();
      // 照相功能
      context.takePhoto({
        quality: "high",
        success: (res) => {
          console.log(res);
          // https://codeleading.com/article/55736338475/
          uni.getFileSystemManager().readFile({
            filePath: res.tempImagePath, //要读取的文件的路径 (本地路径)
            encoding: "base64", //指定读取文件的字符编码，如果不传 encoding，则以 ArrayBuffer 格式读取文件的二进制内容
            success: (res) => {
              //转换完毕，执行上传
              // _this.setData({
              //     avatar: 'data:image/png;base64,' + res.data
              // })
              var path = "data:image/png;base64," + res.data;
              // 照相成功的回调
              this.upload(path);
            },
          });
          uni.hideLoading();
        },
        fail: () => {
          uni.showToast({
            title: "拍摄失败",
          });
          uni.hideLoading();
        },
      });
    },
    // 上传图片
    upload(filePath) {
      uni.showLoading({
        title: "上传识别中",
      });
      uni.request({
        url: this.qfapp + "/api/face/people/verify", // 上传接口
        method: "POST",
        header: {},
        data: {
          faceInfo: filePath,
        },
        dataType: "json",
        success: (res) => {
          const data = res.data;
          uni.hideLoading();
          if (data.code == 200) {
            // 匹配成功
            // 下一步干嘛
            uni.showToast({
              title: data.message || "识别成功",
              icon: "none",
            });
            // 可能需要返回
          } else {
            uni.showToast({
              title: data.message || "上传失败",
              icon: "none",
            });
          }
        },
        fail(err) {
          console.log(err);
          uni.hideLoading();
          uni.showToast({
            title: "上传失败",
            icon: "none",
          });
        },
      });
    },

    
  },
};
</script>

<style>
page {
  background-color: #fff;
}
</style>
<style lang="scss" scoped>
.cameraBox {
  display: flex;
  align-items: center;
  flex-direction: column;

  camera {
    width: 600rpx;
    height: 600rpx;
    position: relative;
  }
  text {
    font-size: 28rpx;
    font-weight: bold;
    color: #333;
  }
  .text1 {
    font-size: 40rpx;
    margin-top: 70rpx;
  }
  .text2 {
    font-size: 32rpx;
    margin: 24rpx 0 72rpx 0;
  }
  .text3 {
    color: #5c74ff;
    margin: 56rpx 0 24rpx 0;
  }
  .text4 {
    color: #ff0000;
    margin: 24rpx 0 72rpx 0;
  }
  &_btn {
    width: 590rpx;
    text-align: center;
    line-height: 88rpx;
    background: linear-gradient(90deg, #ff232c 0%, #ff571b 100%);
    border-radius: 44rpx 44rpx 44rpx 44rpx;
    font-size: 32rpx;
    font-weight: bold;
    color: #ffffff;
  }
  &_btnB {
    width: 590rpx;
    text-align: center;
    line-height: 88rpx;
    background: #fff4f3;
    border: 2rpx solid #f30100;
    border-radius: 44rpx 44rpx 44rpx 44rpx;
    font-size: 32rpx;
    font-weight: bold;
    color: #ff0000;
    margin-bottom: 30rpx;
  }
}
.exchange {
  position: absolute;
  top: 20rpx;
  right: 20rpx;
  z-index: 1000;
  width: 61rpx;
  height: 61rpx;
}
.shibie {
  width: 600rpx;
  height: 600rpx;
}
.imageBox {
  width: 600rpx;
  height: 600rpx;
  position: relative;
}
.imageBox image:last-child {
  position: absolute;
  top: 0;
  left: 0;
}
</style>